iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
Software Development

PHP 語法通關系列 第 5

Day5 利用 Vscode 執行 PHP

  • 分享至 

  • xImage
  •  

真的是大坑,從我開始學程式起,就都是用Vscode這個IDE,也因此我蠻習慣用這個IDE,不想再換別的,不然一般學習PHP許多人的IDE都是phpstorm,所以我來推Vscode!

Vscode的特點

講到Vscode 那麼就要來推薦Vscode的特點
VS Code 最有趣的地方是容許使用者客製化程式碼編輯器。Marketplace 上有很多各種各樣的擴充套件 (Extension),只需要點擊幾下就可以輕鬆整合到 IDE 中。

必裝套件

  • 利於 Laravel 開發的套件

    這個直接方便,package 把許多需要的擴充套件一併下載下來。

Laravel goto view - Hover view('…') 會顯示對應 view 檔案相對位置,Ctrl+click前往編輯頁面

laravel-goto-controller - Alt + click 點擊 router 前往 controller

Laravel Blade Snippets - 非常方便的縮寫自動產出及提示功能

Laravel Artisan - 可以在 Visual Studio Code 命令列使用 Laravel Artisan 指令

DotENV - 方便查看.env檔案 syntax highlighting

PHP IntelliSense - PHP 自動完成及提示
等等非常多樣好用的套件!

  • HTML Snippets

    HTML 縮寫自動產出
    例如:
div --> <div></div>
doc --> <!DOCTYPE html>
a   --> <a href=""></a>
  • HTML phpcs

    檢查PHP編碼規範的擴展

  • Bracket Pair Colorizer 2

為什麼是2呢? 其實是因為有兩個版本,分別為Bracket Pair Colorizer與Bracket Pair Colorizer2,差別在Bracket Pair Colorizer 2速度更快、處理更準確。

這個擴展能讓開發者在複雜的程式碼中更清楚看出每個程式區塊,程式區塊方便辨識之後,減少程式碼錯誤,協助大中小括號({}、[]、())一一的獨立補上不同色彩。

  • Beautify

    針對 javascript, JSON, CSS, Sass, HTML 文字顏色的美化

  • indent-rainbow

在撰寫 HTML 時,良好的縮排有時候程式碼太多很難看出有沒有弄好,隨著結構越複雜的情況下,常常會對不上不同行數的縮排對不上,這個時候顏色就能讓你分辨縮排有沒有對上!

  • Prettier

最適合對於程式碼整齊有強迫症的人,Prettier 針對整個檔案進行重新排版,讓你不需要自己手動一一對齊~

  • Auto Rename Tag

    變更標籤時,結尾標籤自動修改

  • Auto Close Tag

  • Live Server

確保本地開發與運行環境一致,使用 Web Server 是好方法。

如果是在具有後端的環境下,如 PHP、.NET 開發都是包含 Web Server,但有時僅是製作小工具,如果還要開啟後端環境就太麻煩了,Live Server 這個套件能夠讓你一鍵秒開 Web Server,不需再花費許多時間在環境上。

  • Git Graph

視覺化 Graph 功能,可以輕鬆看到 Merge 合併的支線狀況。

  • Chinese (Traditional) Language Pack for Visual Studio Code

    這個可以把Vscode的介面改成中文唷唷唷!

Vscode下載

Day5 Winnie的聊天室

好累....XD 寫了許多擴充套件,但有些功能也類似,最後看大家喜歡什麼,或是需要甚麼功能就去尋找相關的功能使用~
用了這些擴充套件,就是希望可以使自己寫程式的時候操作順很多,一款好的IDE真的幫助很大,其實我覺得PhpStorm的測試蠻好用的,但Vscode我有發現PHPunit好像不錯,但還沒有去研究怎麼用,很期待有機會分享一下。


上一篇
Day4 PHP 基本撰寫概念
下一篇
Day6 PHP變量
系列文
PHP 語法通關30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言